<template>
  <div class="app-container home">
    <el-row :gutter="20" type="flex">
      <el-col :span="14">
        <span class="welcome">Hi，今天也是心情明媚的一天！</span>
      </el-col>
      <el-col :span="10" style="vertical-align: middle">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect"
                 active-text-color="#409EFF">
          <el-menu-item index="1">今天</el-menu-item>
          <el-menu-item index="2">本周</el-menu-item>
          <el-menu-item index="3">本月</el-menu-item>
          <el-menu-item index="4">本季度</el-menu-item>
          <el-menu-item index="5">本年度</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="update-log" style="margin-top: 20px">
          <el-row :gutter="20">
            <el-col v-for="item in images" :key="item.key" :span="6" class="img-words">
              <div class="image">
                <i :class="item.iconClass"></i>
              </div>
              <div class="words">
                <span >{{ item.value }}</span>
                <span v-if="item.num!==0" class="change" :class="{positive: item.num>0, negative: item.num<0}">今日{{item.num>0?'+'+item.num:item.num}}</span>
                <br>
                {{item.name}}
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="48" :sm="48" :md="24" :lg="16">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>随访日程数</span>
          </div>
          <v-chart autoresize :option="option_column" style="height: 300px"></v-chart>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>最近随访日程</span>
          </div>
          <el-card>

          </el-card>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      activeIndex: '1',
      images:[
        { key: 1, value: 4357,name:'访问量', iconClass: 'el-icon-data-analysis',num:5 },
        { key: 2, value: 357,name:'医生数量', iconClass: 'el-icon-s-custom',num: -5},
        { key: 3, value: 57,name:'患者数量', iconClass: 'el-icon-user' ,num: 10},
        { key: 4, value: 7,name:'随访日程数', iconClass: 'el-icon-document' ,num:0}
      ],
      option_column:{
        grid:{
          x:50,
          y:20,
          x2:50,
          y2:20,
          borderWidth:10
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
      }
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    handleSelect(data){
      console.log(data)
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  .welcome{
    vertical-align: middle;
    font-weight: bold;
    color: #1e1e1e;
    font-size: 2em;
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .img-words{
    text-align: center;
    .image{
      font-size: 70px;
      color: #1683FC;
      background-color: #fff;
      margin: 0 10px 0 10px;
    }
    div{
      display: inline-block;
      vertical-align: middle;
    }
    .words{
      color: #b2b0b0;
      font-size: large;
      font-weight: 500;
      text-align: left;
      .change{
        font-size: small;
        font-weight: normal;
        vertical-align: top;
        margin-left: 5px;
      }
      .positive{
        color: #F59A23;
      }
      .negative{
        color: #D9001B;
      }
    }

    span{
      color: #1e1e1e;
      font-size: 1.8em;
      font-weight: bold;
    }
  }
}
</style>

